<!-- 参考官方文档 -->
<template>
    <view class="">
        <view class="box-menu">
            <uni-segmented-control :current="current" :values="typeNames" @clickItem="onClickItem" styleType="button"
                activeColor="rgb(0, 255, 0)"></uni-segmented-control>
        </view>
        <view class="box-content">
            <view class="box-content-item" v-for="(item, index) in data" :key="item._id">
                <image :src="item.url" mode="widthFix" @click="onPreview(index)" lazy-load></image>
                <view class="box-content-item-text">{{item.content}}</view>
                <view class="box-content-item-author">{{item.author}}</view>
            </view>
        </view>
        <view class="box-float">
            <view class="box-float-item box-flex-center" @click="onRefresh">
                <uni-icons type="refreshempty" size="26"></uni-icons>
            </view>
            <view class="box-float-item box-flex-center" @click="onToTop">
                <uni-icons type="arrow-up" size="26"></uni-icons>
            </view>
        </view>
        <view class="box-loading">
            <uni-load-more status="loading"></uni-load-more>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { computed, ref } from 'vue';
    import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';

    let data = ref([]);
    let current = ref(0);
    let types = [{ key: "all", value: "全部" }, { key: "dog", value: "狗" }, { key: "cat", value: "猫" }];
    let typeNames = computed(() => types.map(item => item.value));

    //切换类型
    function onClickItem(e : { currentIndex : number; }) {
        current.value = e.currentIndex;
        data.value = [];
        request();
    };
    //网络请求
    async function request() {
        uni.showNavigationBarLoading();
        let res : any = await uni.request({
            url: "https://tea.qingnian8.com/tools/petShow",
            data: {
                size: 5,
                type: types[current.value].key
            },
            header: {
                "access-key": "taoziandali"
            }
        }).finally(() => {
            uni.hideNavigationBarLoading();
            uni.stopPullDownRefresh();
        });
        if (res.data.errCode === 0) {
            data.value = [...data.value, ...res.data.data];
        } else if (res.data.errCode === 400) {
            uni.showToast({
                title: res.data.errMsg,
                icon: "none",
                duration: 2000
            });
        };
    };
    //预览
    function onPreview(index : number) {
        let urls = data.value.map(item => item.url);
        uni.previewImage({
            current: index,
            urls: urls
        });
    };
    //刷新
    function onRefresh() {
        data.value = [];
        request();
    };
    //回到顶部
    function onToTop() {
        uni.pageScrollTo({
            scrollTop: 0,
            duration: 100
        });
    };

    //触底加载更多
    onReachBottom(() => {
        request();
    });
    //下拉刷新
    onPullDownRefresh(() => {
        data.value = [];
        current.value = 0;
        request();
    });

    request();
</script>

<style lang="scss" scoped>
    @import "@/common/css/common.css";

    .box-menu {
        padding: 50rpx 50rpx 0;
    }

    .box-content {
        padding: 50rpx;

        .box-content-item {
            margin-bottom: 50rpx;
            box-shadow: 0 10rpx 50rpx rgba(0, 0, 0, 0.5);
            border-radius: 25rpx;
            overflow: hidden;

            image {
                width: 100%;
            }

            .box-content-item-text {
                padding: 30rpx;
            }

            .box-content-item-author {
                padding: 0 30rpx 30rpx;
                text-align: right;
            }
        }
    }

    .box-float {
        position: fixed;
        right: 30rpx;
        bottom: calc(20rpx + env(safe-area-inset-bottom));

        .box-float-item {
            width: 90rpx;
            height: 90rpx;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            margin-bottom: 20rpx;
            border: 1px solid $custom-color-white;
        }
    }

    .box-loading {
        padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    }
</style>